import React from 'react';
import { TContainerProps } from './Types';
import { V } from './containers';
import { Inter } from './Texts';

export interface TDividerProps extends TContainerProps {
  /**
   * 分隔线方向
   */
  orientation?: 'horizontal' | 'vertical';
  /**
   * 分隔线颜色
   */
  color?: string;
  /**
   * 分隔线粗细
   */
  thickness?: number;
  /**
   * 分隔线样式
   */
  variant?: 'solid' | 'dashed' | 'dotted';
  /**
   * 分隔线文本
   */
  text?: string;
  /**
   * 文本位置
   */
  textPosition?: 'left' | 'center' | 'right';
}

export function Divider({
  orientation = 'horizontal',
  color = '#e2e8f0',
  thickness = 1,
  variant = 'solid',
  text,
  textPosition = 'center',
  ...props
}: TDividerProps) {
  const dividerStyle = getDividerStyle(orientation, color, thickness, variant);

  if (text && orientation === 'horizontal') {
    return (
      <V row ai="c" {...props}>
        <V f={textPosition === 'left' ? 0 : 1} h={thickness} bg={color} />
        <V ph={16}>
          <Inter fs={14} c="#64748b" fw="500">
            {text}
          </Inter>
        </V>
        <V f={textPosition === 'right' ? 0 : 1} h={thickness} bg={color} />
      </V>
    );
  }

  return <V {...dividerStyle} {...props} />;
}

function getDividerStyle(
  orientation: string,
  color: string,
  thickness: number,
  variant: string
) {
  const baseStyle = {
    backgroundColor: color,
  };

  if (orientation === 'horizontal') {
    return {
      ...baseStyle,
      height: thickness,
      width: '100%',
    };
  } else {
    return {
      ...baseStyle,
      width: thickness,
      height: '100%',
    };
  }
}
